<template>
  <div>
    
    <div >
       <!-- 标题选项 -->
      <yd-tab active-color=#77BDFF :callback="statusClick">
          <yd-tab-panel label="待付款" tabkey="0" :active="status==0"></yd-tab-panel>
          <yd-tab-panel label="待发货" tabkey="1" :active="status==1"></yd-tab-panel>
          <yd-tab-panel label="待收货" tabkey="2" :active="status==2"></yd-tab-panel>
          <yd-tab-panel label="已完成" tabkey="3" :active="status==3"></yd-tab-panel>
      </yd-tab>
     
      <!-- 流程列表 -->
      <div class="list" v-for="(item,index) in listOrder" :key="index">
        <div class="tt">
          <div class="left">
            <img src="../assets/order_center/buy.png">
            <span v-if="status == 0 && item.order_status==1">合并订单</span>
            <span v-else>{{item.shop_name}}</span>

          </div>
          <div class="right">
              <span v-if="item.orderStatus == 0">等待买家付款</span>
              <span v-if="item.orderStatus == 1">等待商家发货</span>
              <span v-if="item.orderStatus == 2">等待买家收货</span>
              <span v-if="item.orderStatus == 3">交易完成</span>
              <span v-if="item.orderStatus == 8">已退款</span>
          </div>
        </div>
        <div class="bianhao"><span>订单编号：</span>{{item.order_num}}</div>
        <div class="center">
        

          <div class="top" v-if="status == 0 && item.order_status==1" @click="hborder(item.id)">
            <div class="left">
              <img src="../assets/order_center/ddai.png" alt="">
            </div>
            <div class="right">
              <div class="titles">
                <span>合并订单</span>
              </div>
              <!-- <div class="price">
                <span>规格：{{item.spec_name}}</span>
              </div> -->
              <div class="price">
                <span style="color:#e63f3f;">￥{{item.shop_price}}+{{item.redbag_num}}鸿包</span>
                <span class="num">X {{item.count}}</span>
              </div>
            </div>
          </div>  

          <div class="top"   v-else>
            <div class="left">
              <img :src="item.thumb" alt="">
            </div>
            <div class="right">
              <div class="titles">
                <span>{{item.title}}</span>
              </div>
              <div class="price">
                <span>规格：{{item.spec_name}}</span>
              </div>
              <div class="price">
                <span  style="color:#e63f3f;">￥{{item.amount}}+{{item.bonus}}鸿包</span>
                <span class="num">X {{item.count}}</span>
              </div>
            </div>
          </div>  

          
          <div class="number" v-if="status == 0 && item.order_status==1">
              <span></span>
              <span>合计：{{item.shop_price}}+{{item.redbag_num}}鸿包 含运费￥{{item.freight_price}}</span> 
          </div> 
          <div class="number" v-else>
              <span></span>
              <span>合计：{{item.amount}}+{{item.bonus}}鸿包 含运费￥{{item.freight_price}}</span>
          </div>
          <div class="back">
              <span>{{item.buyerMessage}}</span> 
          </div>
           <div class="deixs">
           <span v-if="status == 1&&item.orderStatus!=7" class="tuikuanz" @click="tuikuan(item.id)">申请退款</span>
           <span v-if="status == 1&&item.orderStatus==7" class="tuikuanz" @click="dbtuikuan()">退款中</span>
           </div>
        </div>
        <div class="bt">
            <span class="btz">{{item.created_at.date.split('.')[0]}}</span>
            <span class="cate" style="opacity:0;">&nbsp;</span>

            <span class="cate" @click="quxiao(item.id,item.order_status)" v-if="item.orderStatus == 0">取消订单</span>
            <span class="cate" v-if="item.orderStatus == 6" style="border:none; color:#333;">已付款已受理</span>
            <span class="cate" v-if="item.orderStatus == 1" style="border:none; color:#333;">已付款未受理</span>
            <span class="cate" @click="tixing(item.order_num)" v-if="item.orderStatus == 1 || item.orderStatus == 6">提醒发货</span>
            <span class="cate fk" @click="pays(item.id,0)" v-if="item.orderStatus == 0 && item.order_status==0">付款</span>
            <span class="cate fk" @click="pays(item.id,1)" v-if="item.orderStatus == 0 && item.order_status==1">付款</span>
            <span class="cate fk" @click="isok(item.id,item.order_status)" v-if="item.orderStatus == 2">确认收货</span>
            <span class="cate" @click="del(item.id,item.order_status)" v-if="item.orderStatus == 3 || item.orderStatus == 8">删除订单</span>
        </div>
       
      </div>
    </div>
    <!-- 无订单状态 --> 
    <div class="without" v-if="listOrder==null">
      <img src="../assets/order_center/kongbai.png" alt="">
      <span>暂无订单</span> 
    </div>

<yd-keyboard v-model="show1" :callback="done1" ref="keyboardDemo1"></yd-keyboard>

<yd-popup v-model="shshs" position="bottom" >
    <div class="pacsxs" style="background-color:#fff;" >
     <textarea class="texexs" name="" maxlength="50" id="" v-model="liyoux" cols="30" rows="10" placeholder="请输入退款理由">
     </textarea>
     <div class="quedingx" @click="isquDin()">确定</div>
    </div>
</yd-popup>

  </div>
</template>

<script>
import Vue from 'vue';
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
Vue.component(TabPanel.name, TabPanel);

import {KeyBoard} from 'vue-ydui/dist/lib.rem/keyboard';  
Vue.component(KeyBoard.name, KeyBoard); 
export default {
  name: 'index',
  data () {
    return {
     idss:'',
     liyoux:'',
     shshs:false,
     index:0, 
     status:'',
     listOrder:[],
     show1:false,
     safepassword:'',
     numbers:'',
     types:''
    }
  },
  methods:{
    done1(val) {
        console.log('输入的密码是：' + val);
        this.$dialog.loading.open('验证支付密码'); 
        if(val == this.safepassword){
           this.$dialog.loading.close();
           this.show1 = false
           this.fukuan()
        }else{
          this.$refs.keyboardDemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
          this.$dialog.loading.close();
        }
    },
    back: function() {
      this.$router.go(-1);
    },
    ChangeMenu: function(index) {
      this.index = index;
      console.log(this.index)
    },
    indexClick: function() {
      this.$router.push("/");
    },
    logistics:function(){
      this.$router.push("/logistics")
    },
    statusClick: function(label, key) {
        this.status = key;
        console.log(this.status)
        this.listOrder = [];
        if(this.status == 0){
          this.order1()
        }
        if(this.status == 1){
          this.order2() 
        }
        if(this.status == 2){
          this.order3() 
        }
        if(this.status == 3){
          this.order4()
        }
    },
    //待付款
    order1(){
      let self = this;
      let url = "/api/order1";
      self.httpPost(url,{user_id:this.token,token:this.myid,pagesize:999,p:1},function(res) {
        if (res.code == 200) {   
          self.listOrder=res.data
        }
      })
    },
    //待发货
    order2(){
      let self = this;
      let url = "/api/order2";
      self.httpPost(url,{user_id:this.token,token:this.myid,pagesize:999,p:1},function(res) {
        if (res.code == 200) {   
          self.listOrder=res.data
        }
      }) 
    },
    //待收货
    order3(){
      let self = this;
      let url = "/api/order3";
      self.httpPost(url,{user_id:this.token,token:this.myid,pagesize:999,p:1},function(res) {
        if (res.code == 200) {   
          self.listOrder=res.data
        }
      })
    },
    //已完成
    order4(){
      let self = this;
      let url = "/api/order4";
      self.httpPost(url,{user_id:this.token,token:this.myid,pagesize:999,p:1},function(res) {
        if (res.code == 200) {   
          self.listOrder=res.data
        }
      })
    },
    //取消订单
    quxiao(id,type){
      let self = this;
      let url = "/api/order/cancel";
            self.$dialog.confirm({
                title: '是否取消订单？',
                opts: () => {
                  self.httpPost(url,{user_id:this.token,token:this.myid,id:id,order_type:type},function(res) {
                    if (res.code == 200) {   
                       setTimeout(() => {
                          // self.$router.go(0)
                          self.order1();
                      }, 500);
                    }
                  })
                }
            });
    },
    //提醒发货
    tixing(number){
      let self = this; 
      let url = "/api/order/orderTel";
      let data = {
        user_id:this.token,
        token:this.myid,
        order_sn:number
      } 
      self.httpPost(url,data,function(res) {
          if (res.code == 200) {   
           self.$dialog.toast({mes:res.msg});
          }else{
           self.$dialog.toast({mes: res.msg});
          }
        })
    },
    //确认收货
    isok(id,type){
      let self = this;
      let url = "/api/order/affirm";
            self.$dialog.confirm({
                title: '是否确认收货？',
                opts: () => {
                  self.httpPost(url,{user_id:this.token,token:this.myid,id:id,order_type:type},function(res) {
                    if (res.code == 200) {   
                       setTimeout(() => {
                          // self.$router.go(0) 
                         self.order3();
                      }, 500);
                    }
                  })
                }
            });
    },
    //删除订单
    del(id,type){
      let self = this;
      let url = "/api/order/delete";
            self.$dialog.confirm({
                title: '是否删除订单？',
                opts: () => {
                  self.httpPost(url,{user_id:this.token,token:this.myid,id:id,order_type:type},function(res) {
                    if (res.code == 200) {   
                       setTimeout(() => {
                      //     self.$router.go(0)
                        self.order4()
                      }, 500);
                    }
                  })
                }
            });
    },

    pays(num,otype){
      let self = this;
      let url = "/api/safepwd";  
      this.numbers = num
      this.types = otype
			self.httpPost(url,{user_id:this.token,token:this.myid},function(res) {
				if (res.code == 200) {   
            if(res.data == 1){
              self.show1 = true
            }else{
              self.$dialog.toast({
                  mes: '请设置安全密码！',
                  timeout: 1500
              });
               setTimeout(() => {
                    self.$router.push("/ChangePassword");
                }, 1000);
            }
				}else{
        		   alert(res.msg)
				} 
      })
    },
    //付款
    fukuan(){
      let self = this; 
      let url = "/api/shopping/payNow";
      let data = {
        user_id:this.token,
        token:this.myid,
        type:3,//1微信支付
        order_id:this.numbers,
        order_type:this.types,//0是普通 1是合并
      } 
      self.httpPost(url,data,function(res) {
          if (res.code == 200) {   
               setTimeout(() => {
                    window.location.href = 'http://hbh.dev.whbpkj.com/wx/pay/' + res.data;
              }, 500); 
          }else{
             alert(res.msg)
          }
        })
    },
    //查看合并的订单
    hborder(id){
      this.$router.push("/order_11?id=" + id)
    },
         //获取用户资料
    details: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.token, token: this.myid }, function(res) {
        if (res.code === 200) {
          self.safepassword = res.data.safepassword
        }
      });
  },
  tuikuan(id){
    this.idss= id
    this.shshs = true
  },
  isquDin(){
    this.shshs = true 
    let self = this;
    let url = "/api/order/outOrder";
    if(!this.liyoux){
       self.$dialog.toast({mes:'输入退款理由'});
       return
    }
    self.httpPost(url, { user_id: this.token, token: this.myid,order_id: this.idss ,outText:this.liyoux}, function(res) {
        self.shshs = false

      if (res.code === 200) {
        self.liyoux=''
        self.$dialog.toast({mes:res.msg});
      }else{
        self.$dialog.toast({mes:res.msg});
      }
    });
  },
  dbtuikuan(){
    
    this.$dialog.toast({mes:'您的退款申请正在审核中,请勿重复操作'});

  }
  },
  created() { 
      document.title = "订单中心";
      this.myid = localStorage.getItem('mytoken');
		  this.token = localStorage.getItem('myid');
      this.status = this.$route.query.status1;
      this.details()
      if(this.status == 0){
        this.order1()
      }
      if(this.status == 1){
        this.order2() 
      }
      if(this.status == 2){
        this.order3() 
      }
      if(this.status == 3){
        this.order4()
      }
  }
}
</script>


<style scoped>

.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.bt{
  position: relative;
}
.btz{
  position: absolute;
  left: .3rem;
  top: .345rem;
  color: #666;
  font-size: .26rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
    width: 1rem;
    display: flex;
    justify-content: space-between;
}
.top_tab  img{
    width:.43rem;
}
.title{
    margin-top:.02rem;
    padding: 0 .3rem;
    background: #FFF;
    display: flex;
    justify-content: space-between;
}
.title li{
    width:18%;
    padding: .25rem .1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    border-bottom: 2px solid #e63f3f;
    color:#e63f3f;
}
.title .bar span{
    font-size: .28rem;
    color:#666;
}
.list{
    width:100%;
    background: #FFF;
    margin-top:.1rem;
}
.list .tt{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
}
.list .tt .left{
    display: flex;
    align-items: center;
}
.list .tt .left img{
    width: .32rem;
    height:.32rem;
}
.list .tt .left span{
    font-size: .28rem;
    color:#666;
    margin-left:2px;
}
.list .tt .right span{
    font-size: .24rem;
    color:#e63f3f;
}
.list .center{
    padding: .2rem .3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.list .center .top{
    display: flex;
    justify-content: space-between;
}
.list .center .top .left{
    width:23%;
}
.list .center .top  .left img{
    width:100%;
    height:100%;
}
.list .center .top .right{
    width:73%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.list .center .top .right .titles {
    width:100%;
}
.list .center .top  .right .titles span{
    font-size: .26rem;
    color:#333;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.list .center .top .right .price{
    width:100%;
    display: flex;
    justify-content: space-between;
}
.list .center .top .right .price span{
    font-size: .26rem;
    color:#333;
}
.list .center .top .right .price .num{
    font-size: .24rem;
    color:#999;
}
.list .center .number{
    width:100%;
    display: flex;
    justify-content: flex-end;
    padding: .3rem 0;
    font-size: .28rem;
}
.back{
    width:100%;
    display: flex;
    justify-content: flex-end;
    font-size: .28rem;
    color:#999;

}
.list .center .number span{
   font-size: .24rem;
   color:#666;
}
.bianhao{
  font-size: .28rem;
  color: #666;
  margin-left: .3rem;
}
.list .bt{
    width:100%;
    border-top:1px solid #cecece;
    padding: .2rem .3rem;
    display: flex;
    justify-content: flex-end;
}
.list .bt .cate{
  border: 1px solid #666;
  color: #666; 
  line-height: .32rem;
  border-radius:18px; 
  font-size: .24rem;
  text-align: center;
  padding: .15rem .2rem;
  margin-left: .2rem;
}
.list .bt .cate:nth-child(3){
  color:#e63f3f;
  border:1px solid #e63f3f;
}
.fk{
  color:#e63f3f!important;
  border:1px solid #e63f3f!important;
}
/* 无订单状态 */
.without{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.without img{
  width: 2.23rem;
  height: 2.15rem;
}
.without span:nth-child(2){
  font-size: .26rem;
  color:#707070;
  margin-top: .23rem;
}
.without span:nth-child(3){
  font-size: .30rem;
  color:#b7b7b7;
  margin-top: .3rem;
}
.without .cate{
  color: #FFF; 
	width:2.27rem;
	height:.80rem;
  line-height: .80rem;
  border-radius:10px; 
  font-size: .30rem;
  text-align: center;
	background: #e53a30;
	border:none;
  margin-top: .96rem;
}
.tuikuanz{
  line-height: .5rem;
  border-radius: 15px;
  font-size: .24rem;
  padding: 2px 5px;
  text-align: center;
  color: #e63f3f;
  margin-right: .1rem;
}
.texexs{
  width: 100%;
  margin:0 auto;
  display: table;
  border:1px solid  #ccc;
  padding: .15rem;
}
.quedingx{
  width: 100%;
  background:#e63f3f;
  text-align: center;
  margin:0 auto;
  color: #fff;
  line-height: .7rem;
  font-size: .36rem;
  border-radius: 15px;
  margin-top: 20px;
}
.pacsxs{
  padding: .3rem;
}
.deixs{
  display: flex;
  justify-content: flex-end;
}
</style>
